<template lang="">
    <div class="page-outer text-center">
        <el-pagination :page-size="pageSize" :current-page="page"
            layout="total, prev, pager, next" :total="totalPage" @current-change="pageChange">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        name: 'Pagination',
        data() {
            return {
                totalPage:0,
                page:1,
                searching:false
            }
        },
        props:['pageSize'],
        watch:{
            searching(newValue){
                console.log(newValue);
            }
        },
        methods: {
            pageChange(val){
                console.log('当前页',val);
                if(this.searching){
                    this.$bus.$emit('pageChangeSearching',val)
                }else{
                    this.$bus.$emit('pageChange',val)
                }
                this.page = val
            }
        },
        mounted() {
            this.page = 1
            this.$bus.$on('totalPage',(page)=>{
                this.totalPage = page
            })
            this.$bus.$on('search',(val)=>{
                console.log('搜索模式');
                this.searching = true
                if(this.page != 1){
                    this.page == 1
                }
            })
            this.$bus.$on('clearSearch',()=>{
                this.searching = false
                this.page = 1
            })
        },
        beforeDestroy() {
            this.$bus.$off('totalPage')
            this.$bus.$off('search')
            this.$bus.$off('clearSearch')
            this.searching = false
        },
    }
</script>
<style scoped>
    .page-outer {
        margin: 10px;
    }
</style>